/** @jsxImportSource @emotion/react */
import {jsx, css} from "@emotion/react";
import * as React from "react";
import {
  useTheme,TwoHalfFrame,
} from "customize-easy-ui-component";

import { useMedia } from "use-media";
import {useContext} from "react";
import {UserContext} from "../routing/UserContext";
import useLogoutMutation from "../common/useLogoutMutation";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import {TodosMainQuery} from "./__generated__/TodosMainQuery.graphql";
import {UserTaskList} from "./UserTaskList";
import {AloneContainer} from "../comp/AloneContainer";
// import {TwoHalfFrame} from "../../UiDebugSave/sample/TwoHalfFrame";


const graphql = require("babel-plugin-relay/macro");

interface TodosMainProps {
    prepared: {
        myQuery: PreloadedQuery<TodosMainQuery>;
    }
    children: React.ReactNode;      //自己是路由Main主页面，所以这个children表示有没有嵌套的子路由Main入口页面
    id?: string;
    routeData: any;
}

export default function TodosMain(props: TodosMainProps) {
    //把该页面{当前mount的组件}所需要的预制数据preLoad()，数据需求需要在这里预先定义好了，才能够在切换路由点击连接时提前准备完数据的获取，避免render多来一回。
    const data = usePreloadedQuery<TodosMainQuery>(
        graphql`
            query TodosMainQuery( $after:String,$first:Int=10,$orderBy:String,$asc:Boolean=true,
                $iwhere:IspCommonInput
            ) {
                ...UserTaskList
            }
        `,
        props.prepared.myQuery,
    );
  //const { countTask:sumofTask,  }=data;
    const theme = useTheme();
    const {user, setUser} =useContext(UserContext);
    const isLarge = useMedia({ minWidth: "768px" });
    const [activeTab, setActiveTab] = React.useState(2);
    const renderList = isLarge || !props.children;  　//大屏或者小屏但没有显示子路由页面。
  console.log("来TodosMain看当前的params props=",props);
    const { call:signOut } = useLogoutMutation();

  return (
      <AloneContainer>
          <UserTaskList isps={data}/>
      </AloneContainer>
    /*      <TwoHalfFrame rightPanel={!props.routeData?.isExact && props.children}>
          </TwoHalfFrame>*/
  );
};

